<template>
  <!-- <div style="height:400px;width: 100%">
      <div ref="myEchart" id="myEchart":style="{height:'100%',width: '100%'}"></div>
  </div> -->
  <div class="layout" style="height: 100%;">
    <el-tabs v-model="activeName2" type="border-card" style="height: 100%;">
        <div class="container">
          <!-- <div ref="myEchart" id="myEchart":style="{height:'100%',width: '100%'}"></div> -->
          <div id="main" style="width: 1300px;height:800px"></div>
        </div>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import ajax from 'ajax'
import $ from 'jquery'
export default {
  data () {
    return {
      activeIndex: '',//导航栏激活的下标
      activeName2:'first',//标签页默认值
      SIZE_1:'100',
      SIZE_2:'60',
      SIZE_3:'30',
      SIZE_4:'20',
      COLOR_1:'#C71969',
      COLOR_2:'#1984C7',
      COLOR_3:'#19C719',
      COLOR_4:'#8419C7',
    //   node:''
    }
  },
  created () {
    this.initData ()
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initData () {   
      console.log('true')
    },
    // 初始化地图
    initChart () {
        let vm=this
      // 基于准备好的dom，初始化echarts实例
      // var myChart = this.$echarts.init(this.$refs.myEchart)
      var dom = document.getElementById("main");
      var myChart = this.$echarts.init(dom);
      // var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.getJSON('/MT/dataAnalysis/getDataMap', 
        function (json) {
        console.log(json),
        myChart.hideLoading();
        var option = {
        title: {
            // 这里可以写上颜色标志什么的
            text: '',
            // subtext: 'Default layout',
            // top: 'bottom',
            // left: 'right'
        },
        tooltip: {
            trigger: 'item',
            formatter: '未审核'
        },
        legend: [{}],    // 图例
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                type: 'graph',
                layout: 'none',
                // progressiveThreshold: 700,
                data: json.data.nodes.map(function (node) {
                    if(node.type===1){
                        node.color=vm.COLOR_1
                        node.size=vm.SIZE_1
                    } else if(node.type===2) {
                        node.color=vm.COLOR_2
                        node.size=vm.SIZE_2
                    } else if(node.type===3) {
                        node.color=vm.COLOR_3
                        node.size=vm.SIZE_3
                    } else if(node.type==4) {
                        node.color=vm.COLOR_4
                        node.size=vm.SIZE_4
                    }
                    // console.log(Math.ceil(Math.random()*1000))    // 获取从1到10的随机整数 ，取0的概率极小。
                    node.x=Math.ceil(Math.random()*2010)
                    node.y=Math.ceil(Math.random()*1000)
                    return {
                        x: node.x,
                        y: node.y,
                        id: node.id,
                        name: node.label,
                        symbolSize: node.size,
                        itemStyle: {
                            normal: {
                                color: node.color
                            }
                        }
                    };
                }),
                edges: json.data.relations.map(function (edge) {
                    return {
                        source: edge.sourceID,
                        target: edge.targetID
                    };
                }),
                label: {
                    emphasis: {
                        position: 'right',
                        show: true
                    },
                    normal: {
                        show: false//正常状态显示标签
                    }
                },
                roam: true,
                focusNodeAdjacency: true,
                lineStyle: {
                    normal: {
                        width: 0.7,
                        curveness: 0.3,
                        opacity: 1
                    }
                }
            }
        ]
    };
     myChart.setOption(option)
});
    }
  }
}
</script>

<style  scoped>
.container {
  height:800px;
  /* overflow-y: scroll;
  overflow-x: hidden; */
}
</style>
